<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('格式化输入内容')}`">{{ $t('格式化输入内容') }}</t>
            <li>通过<span class="s-code">formatter</span>和<span class="s-code">parser</span>，你可以自定义输入和展示的内容</li>
        </template>
        <div style="width: 300px;">
            <p>v-model 绑定的值：{{ value || 'null' }}</p>
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'text',
            formatter: (val) => `$ ${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
            parser: (val) => val.replace(/\$\s?|(,*)/g, ''),
        });

        return {
            props,
            value,
            templateString: `<template>
    <p>v-model 绑定的值：{{ value || 'null' }}</p>
    <sib-item v-model="value" :props="props"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'text',
            formatter: (val) => \`$ \${val}\`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
            parser: (val) => val.replace(/\$\s?|(,*)/g, ''),
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
